<template>
  <div class="floatWindow">
    <div class="list">
      <div class="item" @click="kefuClick">
        <div>
          <div class="icon"><i class="iconfont2 ic-lianxikefu"></i></div>
          <div>{{ $t(`page.index.customerService`) }}</div>
        </div>
      </div>
      <div class="item" @click="goMerSettled">
        <div>
          <div class="icon"><i class="iconfont2 ic-shangjiaruzhu"></i></div>
          <div>{{ $t(`page.store.title1`) }}</div>
        </div>
      </div>
      <div class="item" @click="goTop">
        <div>
          <div class="icon"><i class="iconfont2 ic-zhiding"></i></div>
        <div>{{ $t(`page.index.top`) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Debounce } from '@/utils/validate.js'
export default {
  name: "floatWindow",
  data() {
    return {

    }
  },
  methods: {
    goMerSettled() {
      this.$router.push({
        path: `/users/merchant_settled`,
        query: { menuCur: 70 }
      });
    },
    kefuClick: Debounce(function () {
      this.comsys.chatConfig(this.$cookies.get('merPlatChatConfig'))
    }),
    goTop: Debounce(function () {
      (function n() {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        if (t > 0) {
          window.requestAnimationFrame(n);
          window.scrollTo(0, t - t / 5)
        }
      })()
    }),
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/variables.scss';

.floatWindow {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(620px,-50%);
  width: 104px;
  z-index: 99;
  cursor: pointer;
  background-color: #fff;
  //border-radius: 8px;
  padding: 16px 8px;

  .list {
    .item {
      border-bottom: 1px solid $use-color-line;
      position: relative;
      width: 100%;
      // height: 64px;
      text-align: center;
      font-size: 12px;
      color: #5C5C5C;
      /*padding: 23px 0;*/
      line-height: 18px;
      opacity: 1;
      border-radius: 4px;
      margin-bottom: 16px;
      padding-bottom: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &:last-of-type{
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
      }

      >div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        line-height: 22px;
        font-size: 14px;

        &:last-of-type{
          &:hover{
            color: $user--color-primary;
          }
        }

        .icon {
          background: rgba(0, 120, 94, 0.1);
          width: 48px;
          height: 48px;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-bottom: 12px;

          >i {
            font-size: 26px;
            color: $user--color-primary;
          }
        }
      }
    }
  }
}
</style>
